<template>
  <div class="brandListWrap" >
     <mt-popup
      v-model="brandVisible"
      position="right"
      class="mintPop ">
        <top-btn @cancel="brandCancel"></top-btn>
      <div class="page-indexlist-wrapper">
        <mt-index-list>
          <mt-index-section v-for="item in alphabet" :index="item.initial" :key="item.initial">
            <mt-cell v-for="cell in item.cells" :title="cell.brandName" :key="cell.brandId">
              <img :src="cell.imgSrc" @click="toggle(cell)">
            </mt-cell>
          </mt-index-section>
        </mt-index-list>
       </div>
        <clear-btn @cancel="clearBrand"></clear-btn>
     </mt-popup>
 </div>
</template>

<script>
import unSelect from "@/assets/images/cateSelect/select.png";
import select from "@/assets/images/cateSelect/true.png";
import { mapGetters, mapMutations } from "vuex";
import ClearBtn from "@/base/clearBtn/clearBtn";
import TopBtn from "@/base/topBtn/topBtn";
export default {
  data() {
    return {
      brandVisible: false,
      alphabet: [],
      brandShorts: []
    };
  },
  computed: {
    ...mapGetters(["brandsList"])
  },
  created() {},
  methods: {
    initail() {
      this.brandsList.forEach(cell => {
        if (cell.checked) {
          this.$set(cell, "imgSrc", select);
        } else {
          this.$set(cell, "imgSrc", unSelect);
        }
      });
    },
    show() {
      this.brandVisible = true;
      this.initail();
      this.alphabet = [];
      "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").forEach(initial => {
        let cells = this.brandsList.filter(
          (name, index) =>
            this.brandsList[index].brandShort.split("")[0] === initial
        );
        if (cells.length) {
          this.alphabet.push({
            initial,
            cells
          });
        }
      });
      // console.log(this.alphabet);
      // console.log(this.brandsList);
    },
    hide() {
      this.brandVisible = false;
    },
    brandCancel() {
      this.hide();
    },
    toggle(cell) {
      if (cell.checked) {
        this.$set(cell, "imgSrc", unSelect);
        this.$set(cell, "checked", false);
      } else {
        this.$set(cell, "imgSrc", select);
        this.$set(cell, "checked", true);
      }
    },
    clearBrand() {
      this.brandsList.forEach(cell => {
        if (cell.checked) {
          this.$set(cell, "imgSrc", unSelect);
          this.$set(cell, "checked", false);
        }
      });
      this.$root.Bus.$emit("clearAllBrand");
    }
  },
  components: {
    ClearBtn,
    TopBtn
  }
};
</script>

<style lang="less">
.brandListWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mintPop {
    width: 6.5rem;
    height: 100%;
    .page-indexlist-wrapper {
      position: absolute;
      top: 0.9rem;
      bottom: 1.2rem;
      right: 0;
      left: 0;
      .mint-indexlist {
        width: 100%;
        height: 100%;
        overflow: scroll;
        .mint-indexlist-content {
          width: 100%;
          height: auto;
          display: block;
          overflow-y: scroll;
          margin-top: 0.05rem;
          // padding-bottom:1.2rem
          .mint-indexsection {
            display: block;
            width: 100%;
            overflow: hidden;
            .mint-indexsection-index {
              background-color: #eee;
              height: 0.5rem;
              font-size: 0.28rem;
              line-height: 0.5rem;
              color: #4e4e4e;
              padding: 0 0 0 0.2rem;
              overflow: hidden;
            }
            ul {
              overflow: hidden;
              .mint-cell {
                position: relative;
                height: 0.9rem;
                border-bottom: 1px solid #eee;
                line-height: 0.9rem;
                padding-left: 0.2rem;
                margin-right: 0.4rem;
                font-size: 0.28rem;
                font-family: "Microsoft YaHei", "Arial", "Helvetica",
                  "sans-serif";
                &:last-child {
                  border: none;
                }
                img {
                  width: 0.26rem;
                  height: 0.26rem;
                  position: absolute;
                  top: 0.32rem;
                  right: 0.3rem;
                }
              }
            }
          }
        }
        .mint-indexlist-nav {
          position: fixed;
          border: none;
          background-color: transparent;
          .mint-indexlist-navlist {
            padding-right: 0.1rem;
            background-color: transparent;
            .mint-indexlist-navitem {
              padding: 0;
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}
</style>
